<template>
    <el-dialog v-model="visible" title="配置字典数据" width="60%">
        <el-button type="primary" :icon="Plus" class="mb-[20px]" v-perm="'sys:dict:data:add'"
            @click="openAddOrUpdatePage('add', null)">添加</el-button>
        <el-button type="danger" :icon="Delete" class="mb-[20px]" v-perm="'sys:dict:data:delete'"
            @click="batchDelete()">删除</el-button>

        <el-table :data="tableData" height="calc(100vh - 285px)" max-height="calc(100vh - 285px)" stripe
            :header-cell-style="{ 'background-color': 'rgba(229, 231, 235, var(--tw-bg-opacity))' }" row-key="id"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" :selectable="selectable" width="55" />
            <el-table-column prop="type" label="字典类型" width="150px"/>
            <el-table-column prop="key" label="键" width="100px"/>
            <el-table-column prop="value" label="值" width="50px"/>
            <el-table-column prop="sort" label="排序" width="70px"/>
            <el-table-column prop="css" label="字典tag样式" width="160px"/>
            <el-table-column label="创建人" width="150px">
                <template #default="scope">
                    {{ scope.row.createByUsername ? `${scope.row.createByRealName}${scope.row.createByRealName ? ' (' + scope.row.createByUsername + ')' : ''}` : scope.row.createByUsername || '' }}
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="200px"/>
            <el-table-column label="更新人" width="150px">
                <template #default="scope">
                    {{ scope.row.updateByUsername ? `${scope.row.updateByRealName}${scope.row.updateByRealName ? ' (' + scope.row.updateByUsername + ')' : ''}` : scope.row.updateByUsername || '' }}
                </template>
            </el-table-column>
            <el-table-column prop="updateTime" label="更新时间" width="200px"/>
            <el-table-column fixed="right" label="操作" width="240px">
                <template #default="scope">
                    <el-button link type="warning" size="small" :icon="Edit" v-perm="'sys:dict:type:update'"
                        @click="openAddOrUpdatePage('update', scope.row)">修改</el-button>
                    <el-button link type="danger" size="small" :icon="Delete" v-perm="'sys:dict:type:delete'"
                        @click="deleteById(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <AddOrUpdate ref="addOrUpatePageRef" :querySelective="querySelective" :dictType="dictType"></AddOrUpdate>
    </el-dialog>
</template>

<script setup>
import { reactive, ref } from 'vue'
import AddOrUpdate from '@/views/sys/dict/data/AddOrUpdate.vue'
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { queryDictDataListReq, deleteReq } from '@/api/sys/dict/data/index.js'

const visible = ref(false)

const dictType = ref('')
const open = (type) => {
    dictType.value = type
    visible.value = true;
    querySelective();
}

const tableLoading = ref(false)
const tableData = ref([])
const querySelective = async () => {
    tableLoading.value = true;
    const res = await queryDictDataListReq(dictType.value);
    if (res.code == 200) {
        tableData.value = res.data
    }
    tableLoading.value = false;
}

const addOrUpatePageRef = ref()
const openAddOrUpdatePage = (type, row) => {
    addOrUpatePageRef.value?.open(type, row)
}

const selectIds = ref([])
const handleSelectionChange = (val) => {
    selectIds.value = []
    val.forEach(item => {
        selectIds.value.push(item.id);
    })
    console.log("selectIds", selectIds.value)
}

const batchDelete = () => {
    if (selectIds.value.length == 0) {
        ElMessage({
            message: '请选择要删除的字典数据！',
            grouping: true,
            type: 'error',
        })
        return;
    }
    ElMessageBox.confirm(
        '此操作将删除选中的字典数据，您确定要继续吗？',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        deleteReq(selectIds.value).then(res => {
            if (res.code == 200) {
                ElMessage.success(res.message)
                querySelective();
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消删除！',
        })
    })
}

const deleteById = (id) => {
    ElMessageBox.confirm(
        '此操作将删除本字典数据，您确定要继续吗？',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        const ids = []
        ids.push(id)
        deleteReq(ids).then(res => {
            if (res.code == 200) {
                ElMessage.success(res.message)
                querySelective();
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消删除！',
        })
    })
}


defineExpose({
    open
})
</script>